<template>
  <Row :gutter="16">
    <i-col
      :span="6"
      v-for="(item, index) in allVideoStreamUrl.videoDetail"
      :key="`item-${index}`"
      style="padding-bottom: 5px"
    >
      <Card class="monitor-card" :bordered="false">
        <p slot="title" style="color: #00155b" @dblclick="handleVideo(index)">
          {{ item.ch_name }}
        </p>
        <p slot="extra" style="color: #00155b; font-size: 20px">
          视频流:
          <Icon
            v-if="
              allVideoStreamPingResult[item.ch_name] != undefined &&
              allVideoStreamPingResult[item.ch_name].is_alive == true
            "
            type="md-checkmark"
            color="#2EFE2E"
            size="30"
          />
          <Icon v-else type="md-close" color="red" size="30" />
        </p>

        <div class="vid" @dblclick="handleVideo(index)">
          <!-- <RTMPPlayer v-if="item.out_url" :src="item.out_url" /> -->
          <img :src="item.road_cover" width="100%" height="100%" />
        </div>

        <Row>
          <i-col>
            <Row>
              <i-col :span="24">
                <i-col :span="5">
                  <p>
                    拥堵:
                    <Icon
                      v-if="item.road_state.jam"
                      type="ios-radio-button-on"
                      color="red"
                      size="30"
                    />
                    <Icon
                      v-else
                      type="ios-radio-button-on"
                      color="#2EFE2E"
                      size="30"
                    />
                  </p>
                </i-col>
                <i-col :span="5">
                  <p>
                    行人:
                    <Icon
                      v-if="item.road_state.person"
                      type="ios-man"
                      color="red"
                      size="30"
                    />
                    <Icon v-else type="ios-man" color="gray" size="30" />
                  </p>
                </i-col>
                <i-col :span="5">
                  <p v-if="index >= 0 && index <= 4" style="color: gray">
                    停车:
                    <Icon type="ios-radio-button-on" color="gray" size="30" />
                  </p>
                  <p v-else>
                    停车:
                    <Icon
                      v-if="item.road_state.stop"
                      type="ios-radio-button-on"
                      color="red"
                      size="30"
                    />
                    <Icon
                      v-else
                      type="ios-radio-button-on"
                      color="#2EFE2E"
                      size="30"
                    />
                  </p>
                </i-col>
                <i-col :span="9">
                  <p>车速:{{ item.road_state.speed }} km/h</p>
                </i-col>
              </i-col>
            </Row>
            <!-- <Row>
                <i-col :span=24>
                  <i-col :span=12>
                    <p>天气状况:
                      <Icon :type="weatherIcon[allVideoStreamUrl.videoState[index].weather].type" 
                      :color='weatherIcon[allVideoStreamUrl.videoState[index].weather].color' size=30 />
                      
                    </p>
                  </i-col>
                  <i-col :span=12>
                    <p>车速:{{allVideoStreamUrl.videoState[index].speed}} km/h</p>
                  </i-col>
                </i-col>
                
            </Row> -->
          </i-col>
        </Row>
      </Card>
    </i-col>
  </Row>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
import RTMPPlayer from "./videoPlayerDetail/rtmpPlayer.vue";
var node_schedule = require("node-schedule");
export default {
  components: {
    RTMPPlayer,
  },
  mounted() {
    this.getAllVideoStreamUrl(this.switchWayNo);
    this.getPingResults();
    var intervalVideoState = node_schedule.scheduleJob("*/5 * * * * *", () => {
      //console.log("实时监控页面视频状态实时获取 -------------> 报警事件数据!")
      this.getAllVideoStreamUrl(this.switchWayNo);
    });
    var intervalVideoPing = node_schedule.scheduleJob("1 */10 * * * *", () => {
      console.log("每十分钟监控页面视频存在状态 -------------> ");
      this.getPingResults();
    });
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      //console.log("取消 实时监控页面视频状态实时获取 -------------> 报警事件数据");
      intervalVideoState.cancel();
      intervalVideoPing.cancel();
    });
  },
  computed: {
    ...mapState([
      "allVideoStreamUrl",
      "weatherIcon",
      "switchWay",
      "allVideoStreamPingResult",
    ]),
    ...mapGetters(["switchWayNo"]),
  },
  watch: {
    switchWayNo: function (value) {
      this.getAllVideoStreamUrl(value);
    },
  },
  methods: {
    ...mapActions([
      "getAllVideoStreamUrl",
      "onloadVideoStreamPlayer",
      "getAllVideoState",
      "getPingResults",
    ]),
    handleVideo(index) {
      let roadName = this.allVideoStreamUrl.videoDetail[index].ch_name;
      //console.log("in roadName:",roadName)
      let wayNo = this.switchWayNo;
      let params = { wayNo, roadName };
      this.onloadVideoStreamPlayer(params);
    },
  },
};
</script>
<style lang="less">
.vid {
  //background-color: yellowgreen;
  // background: url(../../assets/default_poster.png) no-repeat center;
  background-size: 200% 200%;
  // height: 80%;
  width: 100%;
  margin: 0 auto;
}

.monitor-card .ivu-card-head {
  padding: 4px 5px;
  border-bottom: 1px solid #13a4c2;
  background-color: #13a4c2 !important;
  height: 35px;
}
.monitor-card .ivu-card-head p {
  font-size: 2.2rem;
  height: 35px;
  line-height: 30px;
  color: #fff;
  text-align: left;
}
.monitor-card .ivu-card-body {
  padding: 1px;
  background-color: #13a4c2;
}
.monitor-card .ivu-card-body p {
  height: 35px;
  line-height: 30px;
  // font-weight:bold;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: rgba(6, 48, 123, 0.98);
  // color:#FF8000;
}

.monitor-card .ivu-card-head {
  padding: 1px 5px;
}
.monitor-card .ivu-card-head p {
  font-size: 2rem;
}
.monitor-card .ivu-card-extra {
  top: 1px;
  font-weight: 700;
  color: #06307bfa;
}
</style>
